<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "0px"
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3"],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        backgroundColor: "transparent",
        // tooltip: {
        //   formatter: "{a} <br/>{b} : {c}%"
        // },
        series: [
          {
            name: '',
            type: 'gauge',
            startAngle:225,
            endAngle:-45,
            radius: '80%',
            splitNumber: 6,
            max: 6,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false
            },
            pointer: {
              width: '5',
              length: '80%'
            },
            detail: { formatter: '{value}级', fontSize: '14' },
            axisLine: {
              show: false,
               lineStyle:{
                width:0,
               color:[[0.2, '#0780ED'], [0.4, '#59CB74'], [0.6, '#FCD450'], [0.8, '#EAA676'], [1, '#EC667D']]
              }
            },
            data: [{ value: 4 }]
          }
        ]
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 1,
        dataIndex: 1
      })
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
      window.addEventListener("resize", () => {
        this.chart.resize()
      })
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length; i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }
}
</script>
